<!--用户管理页-->
<template>
    <div style="height: 6vh;background-color:#fff;padding:10px 20px;">
        <span style="line-height:60px;font-size:20px;">部门管理</span>
        <el-button @click="dialogVisible=true" type="primary" style="float:right;margin-top:13px;">新增部门</el-button>
    </div>
  <!--    新增弹窗-->
    <el-dialog :title="dialogTitle" v-model="dialogVisible" :before-close="handleClose"
               style="width:1000px;padding:40px;">
        <el-form label-width="80px" label-position="top">
            <el-row :gutter="10">
                <el-col :span="12">
                    <el-form-item label="部门名称">
                        <el-input placeholder="请输入部门名称"
                                  v-model="saveDepartmentForm.departmentName" ></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="部门人数">
                        <el-input placeholder="请输入部门人数"
                                  v-model="saveDepartmentForm.numberOfEmployees" ></el-input>
                    </el-form-item>
                </el-col>

            </el-row>
            <el-row :gutter="10">
                <el-col :span="12">
                    <el-form-item label="部门负责人">
                        <el-input placeholder="请输入负责人名称"
                                  v-model="saveDepartmentForm.personInCharge" ></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="部门状态">
                        <el-radio-group v-model="saveDepartmentForm.status">
                            <el-radio value="1" border style="margin:0;">异常</el-radio>
                            <el-radio value="0" border>正常</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
            </el-row>

        </el-form>
        <template #footer>
            <el-button @click="handleClose">取消</el-button>
            <el-button type="primary" @click="saveDepartment">保存</el-button>
        </template>
    </el-dialog>

  <!-- 用户查询卡片 -->
    <el-card style="margin:20px;height: 70px;">
        <el-form :inline="true">
            <el-form-item label="部门搜索">
                <el-input placeholder="输入部门名称" style="width:220px;" v-model="searchDepartmentForm.departmentName"
                          @keydown.enter="loadDepartment"></el-input>
            </el-form-item>

            <el-form-item label="部门状态" style="width:290px;">
                <el-select placeholder="请输入部门状态" v-model="searchDepartmentForm.status" @change="loadDepartment">
                    <el-option label="正常" value="1"/>
                    <el-option label="异常" value="0"/>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button @click="resetSearch">重置</el-button>
                <el-button type="primary" @click="loadDepartment">查询</el-button>
            </el-form-item>
        </el-form>
    </el-card>
  <!-- 部门信息表格 -->

    <el-card style="margin:20px;">
        <el-table :data="DepartmentArr">
            <el-table-column type="index" label="编号" width="80" align="center"/>
            <el-table-column prop="departmentName" label="部门名" align="center"/>
            <el-table-column prop="numberOfEmployees" label="员工数量" align="center"/>
            <el-table-column prop="createTime" label="创建时间" align="center"/>
            <el-table-column prop="personInCharge" label="负责人" align="center"></el-table-column>
            <el-table-column prop="status" label="部门状态" align="center">
                <template #default="scope">
                    <el-switch @change="changeStatus(scope.row.id,scope.row.status)" active-value="1" inactive-value="0"
                               v-model="scope.row.status"></el-switch>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
                <template #default="scope">
                    <el-button link type="primary" size="small" @click="editDepartment(scope.row.id)">编辑</el-button>
                    <el-button link type="primary" size="small"  @click="deleteDepartment(scope.row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </el-card>

</template>

<script setup>
import {onMounted, ref} from "vue";
import axios from "axios";
import {ElMessage} from "element-plus";
import qs from "qs";

const dialogTitle=ref('新增部门');
const dialogVisible = ref(false);
const saveDepartmentForm = ref({
});

//定义数组用来装角色列表信息
const DepartmentArr = ref([]);
//定义对象保存查询条件
const searchDepartmentForm = ref({departmentName: '', status: '',numberOfEmployees:'',personInCharge:''});
//信息加载
const loadDepartment = () => {
    //如果传入了查询条件，则根据条件查询，没有条件，默认查询所有员工信息
    let data = qs.stringify(searchDepartmentForm.value);
    console.log(data)
    axios.get(BASE_URL + '/v1/department/select?' + data).then((response) => {
        if (response.data.code == 2000) {
            DepartmentArr.value = response.data.data;
            console.log(DepartmentArr.value);
        } else {
            ElMessage.error(response.data.msg);
        }
    })
}
//重置用户搜索信息
const resetSearch = () => {
    searchDepartmentForm.value = {};
    loadDepartment();
}
//页面一加载立即调用
onMounted(() => {
    loadDepartment();//加载员工列表
})

//修改用户状态
const changeStatus = (id,status) => {
    axios.post(BASE_URL+'/v1/department/update/status/'+id+'/'+status).then((response) => {
        if (response.data.code == 2000) {
            ElMessage.success('修改成功!');
        } else {
            ElMessage.error(response.data.msg);
            //数据库没修改成功的话，就需要把当前的用户状态重置为修改前的状态
            saveDepartmentForm.status = !saveDepartmentForm.status;
        }
    })
}
//新增员工
const saveDepartment = () => {
    let data = qs.stringify(saveDepartmentForm.value);
    console.log(data);
    axios.post(BASE_URL+'/v1/department/save',data).then((response) => {
        if (response.data.code == 2000) {
            ElMessage.success('保存成功!');
            dialogVisible.value = false;//关闭弹窗
            saveDepartmentForm.value={};//清空输入的数据,防止新增成功后打开弹窗还是之前的数据
            loadDepartment();
        } else {
            ElMessage.error(response.data.msg);
        }
    })
}

//实现取消按钮的功能
const handleClose = ()=>{
    if(confirm('是否关闭本窗口?')){
        //用户确认关闭后,将审批弹窗与确认驳回弹窗一起关掉
        dialogVisible.value = false;
        //取消时把填的数据都清空，表单回复到初始状态
        saveDepartmentForm.value={};
    }
}


//编辑员工
const editDepartment = (id) => {
    //修改弹窗标题并打开弹窗
    dialogVisible.value = true;
    axios.get(BASE_URL + '/v1/department/select?id=' + id).then((response) => {
        if (response.data.code == 2000) {
            saveDepartmentForm.value = response.data.data[0];
        } else {
            ElMessage.error(response.data.msg);
        }
    })
}
//删除用户
const deleteDepartment = (id) => {
    if (confirm('您确认要删除此部门吗?')) {
        axios.post(BASE_URL + '/v1/department/delete/' + id).then((response) => {
            if (response.data.code == 2000) {
                ElMessage.success('删除成功!');
                loadDepartment();
            } else {
                ElMessage.error(response.data.msg);
            }
        })
    }
}
</script>

<style scoped>

</style>